<template>
  <div class="momentsContainer pageContainer flex-column">
    <header-tabs :tabs="tabs"></header-tabs>
    <div class="momentsRouteContent autoGrow flex-row">
      <choose-service-account
        ref="chooseServiceAccount"
        @serviceChange="serviceChange"
        :multiple="isPublish ? true:false"
        :selectAll="false">
        <div class="browseOptions autoGrow flex-column" v-if="!isPublish">
          <div class="changeMomentsType">
            <label>
              <input type="radio" name="radioType" value="friends" :checked="momentsType=='friends'" @change="changeMomentsType('friends')">
              <span>好友</span>
            </label>
            <label>
              <input type="radio" name="radioType" value="self" :checked="momentsType=='self'" @change="changeMomentsType('self')">
              <span>我的</span>
            </label>
            <label>
              <input type="radio" name="radioType" value="timeline" :checked="momentsType=='timeline'" @change="changeMomentsType('timeline')">
              <span>朋友圈</span>
            </label>
          </div>
          <div v-if="momentsType=='friends'" class="searchFriend flex-row">
            <span>关键字</span>
            <input type="text" class="layui-input" placeholder="请输入关键字" v-model="searchKeyword">
            <button class="layui-btn layui-btn-xs" @click="find">查找</button>
          </div>
          <div class="listTitle" v-if="momentsType=='friends'">共计好友{{friends.length}}人</div>
          <div class="friendsList autoGrow" v-if="momentsType=='friends'">
            <div v-for="(item) in filteredFriends" :key="item.id" :class="{'friendsList-friend-item':true,actived:checkedFriend.friendwxid == item.friendwxid}" @click="friendClick(item)">
              <friend
                  :name="item.friendnick"
                  :avatar="item.avatar"
                  :wxid="item.friendwxid"
                  :gander="item.friendsex"
                />
            </div>
          </div>
        </div>
      </choose-service-account>
      <router-view :momentsType="momentsType" :checkedFriend="checkedFriend" :currentService="currentService" ></router-view>
    </div>
  </div>
</template>
<script>
import HeaderTabs from '@/components/headerTabs';
import ChooseServiceAccount from '@/components/chooseServiceAccount';
import UserListItem from '@/components/userListItem';
import Friend from '@/components/friend'
import pinyin from '@/lib/pinyin'

export default {
  name: 'moments',
  data(){
    return {
      isPublish: true,
      currentService: null,
      searchKeyword: '',
      momentsType: 'friends',
      tabs: [
        {
          route: '/moments/publish',
          label: '发朋友圈',
          name: 'publish'
        },
        {
          route: '/moments/browse',
          label: '查看朋友圈',
          name: 'browse'
        },
      ],
      friends: [],
      checkedFriend:{}
       
    }
  },
  created() {
    this.isPublish =  this.$route.name == 'publish' ? true : false
  },
  mounted() {
  },
  updated () {
    this.isPublish =  this.$route.name == 'publish' ? true : false
  },
  computed:{
    filteredFriends(){
      return this.friends.filter(friend=>{
        var wordsChars = pinyin.getFullChars(this.searchKeyword)
        return friend.chars.indexOf(wordsChars)>-1
      })
    }
  },
  watch:{
    $route(to,from){
      if(to.name!==from.name){

        this.$refs['chooseServiceAccount'].clear()
        this.currentService= []  
        
      }
       
    },
    momentsType(val,oldVal){
      if(val!==oldVal){
        if(val === 'friends'){
          this.getFriendList() 
        }
      }  
    }
  },
  components: {
    HeaderTabs,
    ChooseServiceAccount,
    UserListItem,
    Friend
  },
  methods: {
    serviceChange(service) {
      this.currentService = service;
      if(!this.isPublish){
        this.getFriendList()
      }
    },
    friendClick(friend){
      this.checkedFriend = friend
    },
    changeMomentsType(e) {
      this.momentsType = e
    },
    getFriendList(){
      if(!this.currentService || !this.currentService.length || this.momentsType !== 'friends')return
      const { csid , wxid } = this.currentService[0]
      this.$api.friend.list({
        csid,
        wxaccount:wxid
      })
        .then(data=>{
          
          this.friends = data.map(item=>{
            const chars = pinyin.getFullChars(item.friendalias+item.friendnick+item.friendwxid).toLocaleLowerCase()
            item.chars = chars
            return item
          })
          this.friendClick(data[0])
          // console.log(data)
        }) 
    },
    find() {
      if (this.searchKeyword.trim() == '') {
        this.filteredFriends = this.friends
      } else {
        this.filteredFriends = this.friends.filter(f=>f.name.indexOf(this.searchKeyword)>-1)
      }
    }
  }
}
</script>
<style scoped>
.momentsRouteContent{
  height: 100%;
}
.friendsList-friend-item{
  padding: 5px
}
.friendsList-friend-item.actived{
  background-color: #f2f2f2
}
</style>